<template>
  <div class="container">
    <el-dialog
      title="付款操作详情"
      :visible.sync="sendPayinfoDialog.dialogVisible"
      @open="getData"
      @close="confirm"
      center
      :width="widths ? '90%' : '100%'"
    >
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="create_name"
          label="支付人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="onlineMsg"
          label="支付方式"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pay_amount"
          label="支付金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cw_statusMsg"
          label="支付状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="支付时间"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-s-tools"
              @click="modification(scope)"
              v-if="scope.row.status == 2"
              >转为线下支付</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-zoom-in"
              @click="checkPayment(scope)"
              v-if="scope.row.status != 2 && scope.row.online_or != 0"
              >查询支付</el-button
            >
            <el-button
              type="success"
              v-if="
                scope.row.online_or == 1 &&
                  scope.row.status == 1 &&
                  scope.row.apply_reset_status != 1
              "
              size="mini"
              icon="el-icon-edit"
              @click="repay(scope)"
              >申请重付</el-button
            >
            <el-button
              type="info"
              v-if="scope.row.apply_reset_status == 1"
              size="mini"
              icon="el-icon-edit"
              >申请重付待审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="800px"
        center
        title="申请重新支付"
        :visible.sync="innerDialog.innerVisible"
        append-to-body
      >
        <el-form :model="formData" label-width="100px" class="demo-ruleForm">
          <el-form-item label="备注" prop="pass">
            <el-input
              style="width: 500px;"
              type="textarea"
              v-model="formData.remark"
            ></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="pass">
            <div class="imgList">
              <template v-for="(item, index) in formData.imgUrl">
                <div class="imgItem" style="position: relative;">
                  <el-image
                    style="
                  width: 115px;
                  height: 115px;
                  margin-left: 10px;
                  background: #eee;
                  text-align: center;
                  line-height: 115px;
                  margin-bottom: 10px;
                  border-radius: 5px;
                  display: block;
                "
                    :src="item"
                    fit="cover"
                  >
                  </el-image>
                  <i
                    @click="remImg(index)"
                    style="position: absolute;top: 0;right: 0;font-size: 25px;"
                    class="el-icon-error"
                  ></i>
                </div>
              </template>
              <el-upload
                class="upload-demo"
                style="display: inline; margin-left: 10px;"
                action="#"
                :show-file-list="false"
                :http-request="addImg"
              >
                <el-button
                  size="mini"
                  type="primary"
                  class="handleSearch"
                  icon="el-icon-circle-plus"
                  >上传图片</el-button
                >
              </el-upload>
            </div>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="repayBtn()">确 定</el-button>
        </span>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getStatementPayDetail,
  getresetPay,
  checkOnlinePay,
  applyResetOnlinePayBySuccess
} from "@/api/settlement/settlementList";

import {
  smkgetStatementPayDetail,
  smkgetresetPay,
  smkCheckOnlinePay,
  smkApplyResetOnlinePayBySuccess
} from "@/api/superSettlement/settlementList";
import { getToken } from "@/utils/auth";
import { Loading } from "element-ui";
export default {
  props: {
    sendPayinfoDialog: Object
  },
  data() {
    return {
      formData: {
        remark: "",
        pay_detail_id: "",
        img_path: [],
        imgUrl: []
      },
      tableData: [],
      center: [],
      widths: true,
      innerDialog: { innerVisible: false }
    };
  },
  created() {
    this.phones();
  },
  methods: {
    //判断是否移动端
    phones() {
      let widthScreen = window.screen.width;
      if (widthScreen > 768) {
        this.widths = true;
      } else {
        this.widths = false;
      }
    },
    // 重付显示
    repay(scope) {
      this.formData.pay_detail_id = scope.row.id;
      this.innerDialog.innerVisible = true;
    },
    cancel() {
      this.innerDialog.innerVisible = false;
      this.formData = {
        remark: "",
        pay_detail_id: "",
        img_path: [],
        imgUrl: []
      };
    },
    //重付按钮
    repayBtn() {
      let data = {
        pay_detail_id: this.formData.pay_detail_id,
        img_path: this.formData.img_path,
        remark: this.formData.remark
      };
      if (this.sendPayinfoDialog.dialogType == "send") {
        applyResetOnlinePayBySuccess(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
            this.cancel();
          }
        });
      } else {
        smkApplyResetOnlinePayBySuccess(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
            this.cancel();
          }
        });
      }
    },
    //关闭
    confirm() {
      this.sendPayinfoDialog.dialogVisible = false;
    },
    //删除图片
    remImg(index) {
      console.log(index, 9999);
      this.formData.img_path.splice(index, 1);
      this.formData.imgUrl.splice(index, 1);
    },
    //上传附件
    addImg(param) {
      let loading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)"
      });
      let data = new window.FormData();
      data.append("filename", param.file);
      data.append("token", getToken());
      this.$axios.post("/smkapi/FileManage/upload", data).then(res => {
        loading.close();
        if (res.data.code == 0) {
          this.formData.img_path.push(res.data.data.file_path);
          this.formData.imgUrl.push(this.imgHttp + res.data.data.file_path);
        } else {
          this.$message({
            type: "info",
            message: res.data.msg
          });
        }
      });
    },
    // 获取数据
    getData() {
      this.tableData = [];
      let data = {
        pay_id: this.sendPayinfoDialog.id
      };

      if (this.sendPayinfoDialog.dialogType == "send") {
        getStatementPayDetail(data).then(res => {
          console.log(res, 44445555);
          if (res.code == 0) {
            res.data.pay_list.forEach(prop => {
              switch (prop.status) {
                case 1:
                  prop.cw_statusMsg = "成功";
                  break;
                case 2:
                  prop.cw_statusMsg = "失败";
                  break;
                case 3:
                  prop.cw_statusMsg = "已提交支付等待反馈";
                  break;
              }
              switch (prop.online_or) {
                case 1:
                  prop.onlineMsg = "线上";
                  break;
                case 0:
                  prop.onlineMsg = "线下";
                  break;
              }
            });
            this.tableData = res.data.pay_list;
          }
        });
      } else {
        smkgetStatementPayDetail(data).then(res => {
          if (res.code == 0) {
            res.data.pay_list.forEach(prop => {
              switch (prop.status) {
                case 1:
                  prop.cw_statusMsg = "成功";
                  break;
                case 2:
                  prop.cw_statusMsg = "失败";
                  break;
                case 3:
                  prop.cw_statusMsg = "已提交支付等待反馈";
                  break;
              }
              switch (prop.online_or) {
                case 1:
                  prop.onlineMsg = "线上";
                  break;
                case 0:
                  prop.onlineMsg = "线下";
                  break;
              }
            });
            this.tableData = res.data.pay_list;
          }
        });
      }
    },
    //查询支付
    checkPayment(scope) {
      let data = {
        pay_detail_id: scope.row.id
      };
      console.log(this.sendPayinfoDialog, 787878);
      if (this.sendPayinfoDialog.dialogType == "send") {
        checkOnlinePay(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
          } else {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
          }
        });
      } else {
        smkCheckOnlinePay(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
          } else {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
          }
        });
      }
    },
    //回退
    modification(scope) {
      let data = {
        pay_detail_id_str: scope.row.id
      };
      if (this.sendPayinfoDialog.dialogType == "send") {
        getresetPay(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
          }
        });
      } else {
        smkgetresetPay(data).then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.message || res.msg
            });
            this.getData();
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
.imgList {
  display: flex;
  flex-wrap: wrap;
}
</style>
